<template>
	<view class="bottom-btn">
		<view class="bottom-icon" ref="icon" :style="{backgroundImage}"></view>
		<view class="bottom-text" :style="{color:textColor}">{{text }}</view>
	</view>

</template>

<script>
    export default {
        name: "TabButton",
        props: {
            tag: String,
            text: String,
            checked: {
                type: Boolean,
                default: false
            },
            checkedColor: String,
            normalColor: String,
        },
        data() {
            return {
                hasChecked: false,
                urls: [],
                curIndex: 0,
                timer: null,
                backgroundImage: null,
                textColor: null
            }
        },
        mounted() {
            const image=new Image()
            for (let i = 0; i <= 9; i++) {
                const imgUrl = require(`/src/static/img/main/icon_main_tab_${this.tag}_0${i}.png`)
                image.src=`/src/static/img/main/icon_main_tab_${this.tag}_0${i}.png`
                this.urls[i] = `url(${imgUrl})`
            }
            this.hasChecked = this.checked
            this.backgroundImage = this.urls[this.checked ? 9 : 0]
            this.textColor = this.checked ? this.checkedColor : this.normalColor
        },
        destroyed() {
            this.clearTimer()
        },
        methods: {
            changeIcon() {
                if (this.curIndex < 9) {
                    this.curIndex++
                    this.backgroundImage = this.urls[this.curIndex]
                } else {
                    this.clearTimer()
                }
            },
            clearTimer() {
                if (this.timer) {
                    clearInterval(this.timer)
                    this.timer = null
                }
            },
            setChecked(checked) {
                if (this.hasChecked === checked) {
                    return
                }
                this.hasChecked = checked
                this.curIndex = 0;
                this.clearTimer()
                if (checked) {
                    this.timer = setInterval(this.changeIcon, 60)
                    this.textColor = this.checkedColor
                } else {
                    this.backgroundImage = this.urls[0]
                    this.textColor = this.normalColor
                }
            },
        },

    }
</script>

<style scoped>
	.bottom-btn {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.bottom-icon {
		width: 22px;
		height: 22px;
		background-size: 100%;
	}
	
	
	.bottom-text {
		font-size: 11px;
		margin-top: 3px;
	}

</style>
